<template>
	<view class="content">
		<view class="info-card">
			<view class="title">工单信息</view>
			<view class="item-wrapper">
				<view class="u-f-jsb">
					<view class="label">工单号</view>
					<view>{{orderNo}}</view>
				</view>
				<view class="u-f-jsb">
					<view class="label">完成时间</view>
					<view>{{completeTime || '--'}}</view>
				</view>
			</view>
		</view>
		<view class="info-card">
			<view class="title">补液任务</view>
			<view class="item-wrapper" v-for="(item,index) in list" :key="index">
				<view class="u-f-jsb">
					<view class="label">{{item.siteName}}</view>
					<view>{{item.actualCapacity || '--' }}kg</view>
				</view>
			</view>
			<view class="bottom u-f-jsb">
				<view>合计补液(吨)</view>
				<view>{{sum | kg2ton}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			list: [],
			sum: null,
			orderNo: null,
			completeTime: null,
		};
	},
	computed: {
		//登录状态
		isLogin() {
			return this.$store.state.isLogin;
		},
	},
	onLoad(e) {
		this.orderId = e.id
		this.orderNo = e.orderNo
		this.completeTime = e.completeTime
		this.getDetail()
	},
	onReady() {

	},
	methods: {
		getDetail() {
			this.$http({
				url: this.$api.systemUrl + 'fillstorageorderdetail/listByOrderId/' + this.orderId,
				method: 'get',
				loading: 0
			}).then(res =>{
				this.list = res.data
				this.sum = this.list.reduce((pre, cur) => {
					return pre + Number(cur.actualCapacity)
				}, 0)
			})
		}
	}
};
</script>

<style lang="scss">
/* 定位按钮 */
.content {
	overflow: hidden;
}

.info-card {
	margin: 10rpx;
	border-radius: 16rpx;
	background: #ffffff;
	padding: 0 20rpx;
	
	.title {
		border-bottom: 1rpx solid #EEEEEE;
		line-height: 90rpx;
		font-weight: bold;
	}
	.item-wrapper {
		padding-bottom: 10rpx;
		>view {
			line-height: 88rpx;
			color: #666666;
		}
	}
	.label {
		color: #666666;
	}
	.bottom {
		border-top: 1rpx solid #EEEEEE;
		line-height: 88rpx;
		
		view {
			font-weight: bold;
			font-size: 28rpx;
		}
	}
}

</style>
